<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <i class="el-icon-search btn-search" @click="handleShowSearch()" />
      <div class="btn-box">
        <el-button
          type="primary"
          icon="el-icon-document"
          :disabled="list.length <= 0"
          @click="dowloadExcel()"
        >导出excel</el-button>
      </div>
      <div v-show="showbtns == true" class="search-lf">
        <el-form-item width="200px" label="课程名称">
          <el-input
            v-model="listQuery.courseName"
            placeholder="课程名称"
          />
        </el-form-item>
        <el-form-item width="200px" label="客户名称">
          <el-input
            v-model="listQuery.customerName"
            placeholder="客户名称"
          />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input
            v-model="listQuery.supplierName"
            placeholder="合同申请人"
          />
        </el-form-item>

        <el-form-item label="课程编导">
          <el-select
            v-model="listQuery.courseChargeName"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in courseChargeList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="课程质量评价">
          <el-select
            v-model="listQuery.courseQualityEvaluation"
            filterable
            placeholder="请选择"
          >

            <el-option

              key="1"
              label="1星"
              value="1"
            />
            <el-option

              key="2"
              label="2星"
              value="2"
            />
            <el-option

              key="3"
              label="3星"
              value="3"
            />
            <el-option

              key="4"
              label="4星"
              value="4"
            />
            <el-option

              key="5"
              label="5星"
              value="5"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getList()">查询</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table
      v-loading="listLoading"
      border
      height="650px"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" width="60px" label="序号">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="课程ID">
        <template slot-scope="{ row }">
          <template v-if="isRolds!=0">
            <span>{{ row.customerName }}</span>
          </template>
          <a
            v-else
            class="link-type"
            href="javascript:;"
            @click="handleDetail(row.id)"
          >{{ row.courseId }}</a>
        </template>
      </el-table-column>

      <el-table-column align="center" width="200px" label="客户名称">
        <template slot-scope="{ row }">
          <span>{{ row.customerName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="学科">
        <template slot-scope="{ row }">
          <span>{{ row.subjectCategoryName }}</span>
        </template>
      </el-table-column>
      <el-table-column sort align="center" label="课程名称">
        <template slot-scope="{ row }">
          <span>{{ row.courseName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="供应商名称">
        <template slot-scope="{ row }">
          <span>{{ row.supplierName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="课程编导">
        <template slot-scope="{ row }">
          <span>{{ row.courseChargeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="拍摄形式">
        <template slot-scope="{ row }">
          <span>{{ row.shootModeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="课程质量评价">
        <template slot-scope="{ row }">
          <el-rate
            v-model="row.courseQualityEvaluation"
            show-score
            disabled
            text-color="#ff9900"
            score-template="{value}"
          />

        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="{ row }">
          <el-button
            v-show="isRolds==0"
            class="mg-l"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="handleDel(row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :close-on-click-modal="false"
      top="2vh"
      :visible.sync="dialogVisible"
      width="70%"
      title="入库单详情"
    >
      <el-form
        ref="warehouseListes"
        class="rk_form"
        label-width="100px"
        :model="warehouseListes"
        label-position="left"
      >

        <el-row>
          <el-col class="col-border-ru">
            <div class="part1">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="入库ID">
                    <span style="color:#429EFF">{{ warehouseListes.id }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="PO单号">

                    <span style="color:#429EFF">{{ warehouseListes.po }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="客户名称">
                    <!-- <el-input v-model="warehouseListes.customerName" /> -->

                    <span style="color:#429EFF">{{ warehouseListes.customerName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="课程编导">
                    <span style="color:#429EFF">{{ warehouseListes.courseChargeName }}</span>
                  </el-form-item>

                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="课程ID">
                    <span style="color:#429EFF">{{ warehouseListes.courseId }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="课程名称">
                    <span style="color:#429EFF">{{ warehouseListes.courseName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">

                  <el-form-item label="专业分类">
                    <span style="color:#429EFF">{{ warehouseListes.majorCategory }}</span>
                  </el-form-item>

                </el-col>
                <el-col :span="12">
                  <el-form-item label="学科门类">
                    <span style="color:#429EFF">{{ warehouseListes.subjectCategoryName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="省份">
                    <!-- <el-input v-model="warehouseListes.provinceName" /> -->

                    <span style="color:#429EFF">{{ warehouseListes.provinceName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="课程质量评级">
                    <el-rate v-model="warehouseListes.courseQualityEvaluation" disabled />
                  </el-form-item>
                </el-col>

              </el-row>
              <el-form-item label="讲师">
                <el-input v-model="warehouseListes.teacher" placeholder="请输入" />
              </el-form-item>
              <el-form-item label="拍摄形式">
                <el-input v-model="warehouseListes.inShootMode" placeholder="请输入" />
              </el-form-item>
              <el-form-item label="课程质量评语">
                <el-input v-model="warehouseListes.courseQualityComment" />
              </el-form-item>
            </div>
            <!-- <el-form-item label="入库基本信息"></el-form-item> -->
            <div class="part_title">
              <span>入库基本信息</span>
              <i class="span_border" />
              <!-- <span class="title_bor"></span> -->
            </div>
            <div class="ru_border">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="提供人">
                    <el-input v-model="warehouseListes.inProvider" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="提供方式">
                    <el-input v-model="warehouseListes.inProvideMode" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="提供日期">
                    <el-date-picker
                      v-model="warehouseListes.inProvideDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy/MM/dd"
                      value-format="yyyy/MM/dd"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="100px" label="可结款日期">
                    <el-date-picker
                      v-model="warehouseListes.inSettlementDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy/MM/dd"
                      value-format="yyyy/MM/dd"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label-width="100px" label="视频存档URL">
                <el-input v-model="warehouseListes.inVideoUrl" placeholder="请输入视频存档URL" />
              </el-form-item>
              <el-form-item label-width="100px" label="工程存档URL">
                <el-input v-model="warehouseListes.inProjectUrl" placeholder="请输入工程存档URL " />
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label-width="110px" label="实际时长">
                    <span style="color:#429EFF">{{ warehouseListes.actualTimeLength }}</span>
                    <!-- <el-input disabled v-model="warehouseListes.actualTimeLength" placeholder="请输入 " /> -->
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="100px" label="约定售后期限">
                    <!-- <el-input v-model="warehouseListes." placeholder="请输入 " /> -->
                    <el-date-picker
                      v-model="warehouseListes.inAfterSaleTimeLimit"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy/MM/dd"
                      value-format="yyyy/MM/dd"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="课程备注">
                <el-input v-model="warehouseListes.inCourseLibRemark" placeholder="请输入 " />
              </el-form-item>
            </div>
          </el-col>

          <el-col class="col-birder-r">

            <div class="part_title">
              <span>状态反馈信息</span>
              <i class="span_border" />

            </div>
            <div class="ru_border">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="开始下载时间">
                    <el-input v-model="warehouseListes.feedbackDownloadStartTime" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="完成下载时间">
                    <el-input v-model="warehouseListes.feedbackDownloadEndTime" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="课程核对状态">
                <el-input v-model="warehouseListes.feedbackCourseCheckState" placeholder="请输入 " />
              </el-form-item>
              <el-form-item label="课程反馈状态">
                <el-input v-model="warehouseListes.feedbackCourseState" placeholder="请输入 " />
              </el-form-item>
              <el-form-item label="ERP反馈状态">
                <el-input v-model="warehouseListes.feedbackErpState" placeholder="请输入 " />
              </el-form-item>
            </div>

            <div class="part_title">
              <span>供应商信息</span>
              <i class="span_border" />

            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item class="label-pos" label="供应商名称">
                  <span style="color:#429EFF">{{ warehouseListes.supplierName }}</span>
                  <!-- <el-input v-model="" disabled placeholder=" " /> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item class="label-pos" label="结款人">
                  <el-input v-model="warehouseListes.supplierInfoPayer" placeholder=" " />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="版本信息">
                  <el-input v-model="warehouseListes.supplierInfoVersion" placeholder="请输入 " />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item class="ysd_right" label="验收单">

                  <a
                    v-if="this.warehouseListes.supplierInfoAcceptanceReportPath"
                    class="el-icon-download"
                    @click="uploadPath"
                  >下载</a>
                  <a

                    v-else
                  >无</a>

                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="终版数量">
                    <el-input
                      v-model="warehouseListes.supplierInfoEndEditionQuantity"
                      placeholder="请输入 "
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="label_center" label="净版数量">
                    <el-input v-model="warehouseListes.supplierInfoPureQuantity" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="字幕数量">
                    <el-input
                      v-model="warehouseListes.supplierInfoSubtitlesNumber"
                      placeholder="请输入 "
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="label_center" label="工程数量">
                    <el-input v-model="warehouseListes.supplierInfoProjectNumber" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
              </el-row>

            </el-row>
            <el-form-item class="label_center" label="备注信息">
              <el-input
                v-model="warehouseListes.supplierInfoAcceptanceReportRemark"
                type="textarea"
                :rows="4"
                placeholder="请输入 "
              />
            </el-form-item>
            <div class="flex-box">
              <div class="flex-iten">
                <el-form-item label="大纲" label-width="80px">

                  <el-radio v-model="warehouseListes.supplierInfoIsOutline" label="1" value="1">有</el-radio>
                  <el-radio v-model="warehouseListes.supplierInfoIsOutline" label="0">无</el-radio>
                </el-form-item>
              </div>
              <div class="flex-iten">
                <el-form-item label="讲稿" class="label_center" label-width="70px">
                  <el-radio v-model="warehouseListes.supplierInfoIsSpeech" label="1">有</el-radio>
                  <el-radio v-model="warehouseListes.supplierInfoIsSpeech" label="0">无</el-radio>
                  <el-radio-box />
                </el-form-item>
              </div>
              <div class="flex-iten">
                <el-form-item label="PPT" class="label_center" label-width="70px">
                  <el-radio v-model="warehouseListes.supplierInfoIsPpt" label="1">有</el-radio>
                  <el-radio v-model="warehouseListes.supplierInfoIsPpt" label="0">无</el-radio>
                </el-form-item>
              </div>
            </div>

          </el-col>
        </el-row>

      </el-form>
      <div style="text-align: right; margin-top: 20px">
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确定</el-button>
      </div>
    </el-dialog>
    <pagination
      v-show="total >= 20"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  wareHouseList,
  delWarehouse,
  getWarehouseById
} from '@/api/supplier_settlement'

import { getCourseCharge, baseUrl2 } from '@/api/remote-search'
import { Message } from 'element-ui'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { exportWareHouse } from '@/api/exportExcel'
export default {
  name: 'WareHouseList',
  components: { Pagination },
  filters: {
    statusColorFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'danger',
        3: 'warning',
        4: 'info',
        5: ' '
      }
      return statusMap[status]
    },
    statusFilter(status) {
      const statusMap = {
        1: '进行中',
        2: '已完成',
        3: '已过期',
        0: '新合同'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      showbtns: false,
      list: [],
      isRolds: sessionStorage.getItem('roids'),
      editDisabled: false,
      dialogVisible: false,
      downloadLoading: false,
      courseChargeList: [],
      warehouseListes: {
        supplierInfoIsSpeech: '1',
        supplierInfoIsOutline: '1',
        supplierInfoIsPpt: '1'

      },
      total: 0,
      dialogVisibleMenu: false,
      listLoading: true,
      listQuery: {
        access_token: sessionStorage.getItem('token'),
        page: 1,
        courseChargeName: '',
        supplierName: '',
        customerName: '',
        pageSize: 20
      }
    }
  },
  computed: {},
  created() {
    this.getList()
  },
  methods: {
    handleDetail(id) {
      this.dialogVisible = true
      getWarehouseById(id).then((res) => {
        this.warehouseListes = res.data.data
        this.warehouseListes.supplierInfoIsSpeech = res.data.data.supplierInfoIsSpeech.toString()
        this.warehouseListes.supplierInfoIsOutline = res.data.data.supplierInfoIsOutline.toString()
        this.warehouseListes.supplierInfoIsPpt = res.data.data.supplierInfoIsPpt.toString()
      })
      console.log(id)
    },
    handleClose() {
      this.editDisabled = false
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns
    },
    uploadPath() {
      window.location.href =
        baseUrl2 + '/api/file/download' + this.warehouseListes.supplierInfoAcceptanceReportPath
    },
    dowloadExcel() {
      exportWareHouse(this.listQuery)
      // window.location.href =
      //   baseUrl2 +
      //   "/api/file/export_warehouse_receipt?customerName=" +
      //   this.listQuery.customerName +
      //   "&supplierName=" +
      //   this.listQuery.supplierName +
      //   "&courseChargeName=" +
      //   this.listQuery.courseChargeName;
    },
    getList() {
      this.editDisabled = false
      getCourseCharge().then((res) => {
        this.courseChargeList = res.data.data
      })
      this.listLoading = true
      wareHouseList(this.listQuery)
        .then((response) => {
          this.list = response.data.data.rows
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleDel(id) {
      this.$confirm('确定删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      })
        .then(() => {
          console.log('ddd' + id)
          delWarehouse(id).then((res) => {
            if (res.data.code == '200') {
              this.$message.success(res.data.message)
              this.getList()
            } else {
              this.$message.error(res.data.message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-box{
  display: flex;
  .flex-iten{
    flex: 1;
  }
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
